<script setup lang="ts">
  import { ref, watch, useAttrs } from 'vue';
  import { getI18nBykey } from '/@/utils/index';
  const attrs = useAttrs();

  const props = withDefaults(
    defineProps<{
      inputValue: FormFieldType.field['inputValue'];
      options: any;
      selectAllName: any;
    }>(),
    {
      inputValue: undefined,
      options: undefined,
      selectAllName: getI18nBykey('base.partition.allSelect'),
    },
  );
  const emit = defineEmits<{
    (e: 'update:inputValue', value: any): void;
  }>();

  const optionValue = ref<any>(undefined);
  const onChange = (val: any) => {
    optionValue.value = val;
    emit('update:inputValue', val);
  };
  const select = (select) => {
    console.log('select', select);
    if (select == '-1') {
      const newValue = ['-1', ...props.options.map((item) => item.value)];
      optionValue.value = newValue;
      emit('update:inputValue', newValue);
    } else {
      const newValue = [...props.options.map((item) => item.value)];
      const isEqual = newValue.sort().toString() == optionValue.value.sort().toString();
      if (isEqual) {
        const newValue = ['-1', ...props.options.map((item) => item.value)];
        optionValue.value = newValue;
        emit('update:inputValue', newValue);
      }
      // console.log('newValue', newValue);
      // console.log('abc', optionValue.value);
    }
  };
  const deselect = (deselect) => {
    console.log('deselect', deselect);
    if (deselect == '-1') {
      optionValue.value = [];
      emit('update:inputValue', []);
    } else {
      const newValue = [...props.options.map((item) => item.value)];
      const isEqual = newValue.sort().toString() == optionValue.value.sort().toString();
      if (isEqual) {
        const newValue = ['-1', ...props.options.map((item) => item.value)];
        optionValue.value = newValue;
        emit('update:inputValue', newValue);
      } else {
        const tempData = optionValue.value.filter((item) => item != -1 && item != deselect);
        optionValue.value = tempData;
        emit('update:inputValue', tempData);
        console.log('不相等');
      }
    }
  };
  watch([() => props.inputValue, () => props.options], (nextState) => {
    const optionsValue = [...nextState[1].map((item) => item.value)];
    const isEqual = optionsValue?.sort().toString() == nextState[0]?.sort().toString();
    if (isEqual) {
      const tempValue = ['-1', ...nextState[1].map((item) => item.value)];
      optionValue.value = tempValue;
    } else {
      optionValue.value = nextState[0];
    }
  });
</script>

<template>
  <a-select
    v-model:value="optionValue"
    mode="multiple"
    style="width: 100%"
    show-arrow
    v-bind="attrs"
    @change="onChange"
    @select="select"
    @deselect="deselect"
  >
    <!-- v-bind="attrs" -->
    <!-- @change="onChange"
    @select="select"
    @deselect="deselect" -->
    <!-- 这个是自定义的一个全选项，展示在所有下拉项的顶部位置 -->
    <!-- 全选 -->
    <a-select-option key="-1" value="-1">
      {{ props.selectAllName }}
    </a-select-option>
    <a-select-option v-for="item in props.options" :key="item.value" :value="item.value">
      {{ item.label }}
    </a-select-option>
  </a-select>
</template>

<style lang="less" scoped></style>
